import PropTypes from 'prop-types'
import React, { createContext, memo, useState,useEffect } from 'react'
import './demo.css'
import Demo from './test_demo'
import {Bat} from '../public'
const demo = memo((props) => {
const [msg,setMsg]=useState({message:'晚安',color:'red'})
const [array1, setArray1] = useState([
  { id: 1, name: 'Object 1' },
  { id: 2, name: 'Object 2' },
  { id: 3, name: 'Object 3' },
  { id: 4, name: 'Object 4' }
]);

const [array2, setArray2] = useState([
  { id: 1, name: 'Object 惠妹' },
  { id: 5, name: 'Object 5' },
  { id: 6, name: 'Object 6' },
  { id: 7, name: 'Object 7' },
  { id: 8, name: 'Object 8' }
]);

const [obj,setObj]=useState({a:'惠妹',b:'娅姐',c:'郝小姐'})

useEffect(()=>{ 
console.log(msg,'msg最新值');
},[msg])

useEffect(()=>{ 
  console.log(array1,'array1最新值');
  },[array1])

const changeMsg=()=>{
  setMsg(prev=>({
    ...msg,
    message:'你好呀，惠妹！'
  }))
}

const changeArr=()=>{
setArray1(()=>[...array1,...array2]
)
}

  return (
    <>
    <div> 
      <div className='bl'>
      <span className='al'>当前显示：{msg.message}  </span>
      <button onClick={changeMsg}>点我修改内容</button>
      <span className='al' style={{'color':msg.color}}>当前显示：{msg.color}  </span>
      </div>
    <h2>Array 1 </h2>
      <ul>
        {
          array1.map(item=><li key={item.id}>{item.name}</li>)
        }
      </ul>
      <h2>Array 2 </h2>
      <ul>
        {
           array2.map(item=><li key={item.id}>{item.name}</li>)
        }
      </ul>
      <button onClick={changeArr}>点击我改变Array1</button>
    </div>

    <h2>forEach 方法返回值为undefined 下面不会显示</h2>
    <ul>
      {
        array1.forEach((item,index)=>{
          return <li key={index}>{item.name}</li>
        })
      }
    </ul>

      <h2>obj </h2>
      <ul>
        {
          Object.entries(obj).map(([key,value],index)=>{
            return <li key={key}>{value}</li>
          })
        }
      </ul>
    <Bat.Provider value={msg} >
    {/* <Demo/> */}
    </Bat.Provider>
    
    </>
  )
})

demo.propTypes = {}

export default demo